import { LeftOutline } from 'antd-mobile-icons'
import { useNavigate, useLocation } from 'react-router-dom'
import { useState, useEffect } from 'react'
import './index.scss'
function Zyyj() {
    const navigate = useNavigate()
    const location = useLocation()
    const [inputAmount, setInputAmount] = useState('')
    const [isRecharging, setIsRecharging] = useState(false)
    const [rechargeSuccess, setRechargeSuccess] = useState(false)
    // 从localStorage获取初始余额，如果没有则使用默认值
    const getInitialBalance = () => {
        const savedBalance = localStorage.getItem('patientBalance')
        return savedBalance ? parseFloat(savedBalance) : 100.00
    }
    
    const [balance, setBalance] = useState(getInitialBalance)
    
    // 保存余额到localStorage
    useEffect(() => {
        localStorage.setItem('patientBalance', balance.toString())
    }, [balance])
    
    // 从路由状态中获取患者信息
    const { patientInfo, formData } = location.state || {}
    
    // 使用传递过来的信息或默认值
    const displayInfo = {
        name: patientInfo?.name || formData?.patientName || '王小柯',
        id: patientInfo?.hospitalizationId || formData?.medicalCardNumber || '2015****10'
    }
    
    // 处理金额按钮点击
    const handleAmountClick = (amount: string) => {
        setInputAmount(amount)
    }
    
    // 处理输入框变化
    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        setInputAmount(e.target.value)
    }
    
    // 处理充值按钮点击
    const handleRecharge = () => {
        if (!inputAmount || inputAmount.trim() === '') {
            alert('请输入充值金额')
            return
        }
        
        const amount = parseFloat(inputAmount)
        if (isNaN(amount) || amount <= 0) {
            alert('请输入有效的充值金额')
            return
        }
        
        // 开始充值流程
        setIsRecharging(true)
        setRechargeSuccess(false)
        
        // 模拟充值过程
        setTimeout(() => {
            setIsRecharging(false)
            setRechargeSuccess(true)
            setBalance(prev => prev + amount)
            setInputAmount('')
            
            // 3秒后隐藏成功提示
            setTimeout(() => {
                setRechargeSuccess(false)
            }, 3000)
        }, 2000)
    }
  return (
    <div className='zyyj'>
        <div className='zyyj-top'>
            <span><LeftOutline className='zyyj-top-left' onClick={() => navigate(-1)} /></span>
            <span className='zyyj-top-title'>住院预交</span>
        </div>
        <div className='zyyj-bg'>
            <div className='zyyj-bg-one'>
                 <span className='patient-name'>
                    {displayInfo.name}
                 </span>
                 <span className='patient-id'>
                    {displayInfo.id}
                 </span>
                 <span className='switch-btn'>
                    切换
                 </span>
            </div>
             <div className='zyyj-bg-two'>
                 <div className='hospital-header'>
                     <div className='hospital-icon'>
                         <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                             <rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" strokeWidth="2"/>
                             <path d="M9 9H15V15H9V9Z" stroke="currentColor" strokeWidth="2"/>
                             <path d="M12 3V9" stroke="currentColor" strokeWidth="2"/>
                             <path d="M12 15V21" stroke="currentColor" strokeWidth="2"/>
                             <path d="M3 12H9" stroke="currentColor" strokeWidth="2"/>
                             <path d="M15 12H21" stroke="currentColor" strokeWidth="2"/>
                         </svg>
                     </div>
                     <div className='hospital-name'>四川省保健院</div>
                 </div>
                 <div className='patient-info-list'>
                     <div className='info-row'>
                         <span className='info-label'>住院人</span>
                         <span className='info-value'>{displayInfo.name}</span>
                     </div>
                     <div className='info-row'>
                         <span className='info-label'>住院病区</span>
                         <span className='info-value'>内一科病区</span>
                     </div>
                     <div className='info-row'>
                         <span className='info-label'>住院号</span>
                         <span className='info-value'>{displayInfo.id}</span>
                     </div>
                 </div>
             </div>
             <div className='zyyj-bg-three'>
                 <div className='balance-section'>
                     <div className='balance-label'>剩余金额(元)</div>
                     <div className='balance-amount'>{balance.toFixed(2)}</div>
                     <div className='dashed-line'></div>
                 </div>
                 
                 <div className='recharge-section'>
                     <div className='amount-input-container'>
                         <span className='currency-symbol'>¥</span>
                         <input 
                             type='text' 
                             className='amount-input' 
                             placeholder='点击输入预存金额'
                             value={inputAmount}
                             onChange={handleInputChange}
                         />
                     </div>
                     
                     <div className='amount-options'>
                         <button 
                             className='amount-btn' 
                             onClick={() => handleAmountClick('100')}
                         >
                             ¥ 100
                         </button>
                         <button 
                             className='amount-btn' 
                             onClick={() => handleAmountClick('500')}
                         >
                             ¥ 500
                         </button>
                         <button 
                             className='amount-btn' 
                             onClick={() => handleAmountClick('1000')}
                         >
                             ¥ 1000
                         </button>
                     </div>
                     
                     <button 
                         className='recharge-btn' 
                         onClick={handleRecharge}
                         disabled={isRecharging}
                     >
                         {isRecharging ? '充值中...' : '立即充值'}
                     </button>
                 </div>
             </div>
             
             <div className='zyyj-bg-four'>
                 <div className='history-section'>
                     <div className='history-icon'>
                         <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                             <path d="M14 2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.89 22 5.99 22H18C19.1 22 20 21.1 20 20V8L14 2Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                             <path d="M14 2V8H20" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                             <path d="M16 13H8" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                             <path d="M16 17H8" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                             <path d="M10 9H9H8" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                         </svg>
                         <span className='yen-symbol'>¥</span>
                     </div>
                     <span className='history-text' onClick={() => navigate('/czjl')}>充值记录</span>
                     <div className='arrow-icon'>
                         <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                             <path d="M9 18L15 12L9 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                         </svg>
                     </div>
                 </div>
             </div>
             
             {/* 充值中弹窗 */}
             {isRecharging && (
                 <div className='recharge-overlay'>
                     <div className='recharge-modal'>
                         <div className='loading-spinner'></div>
                         <div className='recharge-text'>充值中...</div>
                     </div>
                 </div>
             )}
             
             {/* 充值成功弹窗 */}
             {rechargeSuccess && (
                 <div className='recharge-overlay'>
                     <div className='recharge-modal success'>
                         <div className='success-icon'>✓</div>
                         <div className='recharge-text success-text'>充值成功</div>
                     </div>
                 </div>
             )}
        </div>
    </div>
  )
}

export default Zyyj